import { h } from "preact";
import { useState } from "preact/hooks";
import { Head } from "$fresh/runtime.ts";
import Container from "../components/Container.tsx";
import RichTextEditor from "../components/RichTextEditor.tsx";

export default function EditorPage() {
  const [content, setContent] = useState("");

  return (
    <>
      <Head>
        <title>富文本编辑器示例 | My Fresh Blog</title>
      </Head>
      <Container size="lg" className="py-8">
        <h1 className="text-3xl font-bold mb-6">富文本编辑器示例</h1>
        
        <div className="mb-8">
          <RichTextEditor 
            value={content} 
            onChange={(html) => setContent(html)} 
            placeholder="开始编辑内容..." 
            height="400px"
          />
        </div>
        
        <div className="mt-6">
          <h2 className="text-xl font-semibold mb-3">编辑器内容预览:</h2>
          <div 
            className="p-4 border rounded-md bg-gray-50"
            dangerouslySetInnerHTML={{ __html: content }}
          />
        </div>
        
        <div className="mt-6">
          <h2 className="text-xl font-semibold mb-3">HTML 源码:</h2>
          <pre className="p-4 border rounded-md bg-gray-800 text-white overflow-x-auto">
            {content}
          </pre>
        </div>
      </Container>
    </>
  );
} 